<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>bilibili干杯</title>
		<link rel="icon" href="http://www.zlhpro.online:8080/pictures/bilibilibog.ico">
		<link rel="canonical" href="https://getbootstrap.com/docs/3.4/examples/carousel/">
		<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.20/dist/css/bootstrap.min.css"
			rel="stylesheet">
		<style>
			nav {
				left: 0px;
				top: 0px;
				width: 1920px;
				height: 100px;
				line-height: 20px;
				background-color: rgba(255, 255, 255, 100);
				text-align: center;
			}

			#indexicon {
				position: absolute;
				left: 49px;
				top: 2px;
				width: 271px;
				height: 97px;
				z-index: 10;
			}

			.carousel-inner img {
				width: 100%;
			}

			.itm {
				display: inline-block;
				padding: 30px 30px 40px 30px;
			}

			footer {
				left: 0px;
				top: 1659px;
				width: 100%;
				height: 360px;
				line-height: 20px;
				background-color: rgba(17, 17, 17, 100);
				text-align: center;
			}

			.l h2 {
				color: rgba(145, 145, 145, 100);
				font-family: SourceHanSansSC-regular;
			}

			.l {
				position: relative;
				float: left;
				left: 445px;
				top: 110px;
			}

			.r h2 {
				color: rgba(145, 145, 145, 100);
				font-family: SourceHanSansSC-regular;
			}

			.r {
				position: relative;
				float: right;
				top: 110px;
				right: 543px;
			}

			#nbtn {
				position: absolute;
				right: 76px;
				top: 26px;
				width: 257px;
				height: 56px;
				border-radius: 7px;
				background-color: rgba(40, 124, 221, 86);
				color: rgba(255, 255, 255, 86);
				font-size: 28px;
				text-align: center;
				font-family: Microsoft Yahei;
				border: 1px solid rgba(187, 187, 187, 100);
			}

			.mybtn {
				margin: 0px;
				padding: 0px;
				background-color: #FFFFFF;
				border: none;
				outline: none;
				width: 411px;
				height: 231px;
			}

			.mybtn::after {
				border: none;
			}
			
			.shab{
				width: 411px;
				height: 231px;
			}
		</style>
		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			$(document).ready(function() {
				var arr = document.getElementsByClassName('mybtn');
				console.log(arr.length);
				for(var i=0;i<arr.length;i++){
					console.log(i);
					arr[i].onclick = function(){
						//对于不同的视频，需要追加不同的参数以供使用
						window.location.href = "barrage-video.html"+"?mid="+this.id;
					}
				}

				$("#nbtn").click(function() {
					window.location.href="login.html";
				});

				$(".gouba").click(function() {
					alert("你知道的太多了！！");
				});
			});
		</script>
	</head>
	<body>
		<nav>
			<a href="index.html"><img src="http://www.zlhpro.online:8080/pictures/图片@3x.png" id="indexicon" /></a>
			<button id="nbtn">快点登录啊！！</button>
		</nav>

		<div id="myCarousel" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner" role="listbox">
				<div class="item active">
					<img class="first-slide" src="http://www.zlhpro.online:8080/pictures/indexbg1.jpg" alt="First slide">
					<div class="container">
						<div class="carousel-caption">
							<h1>鼠鼠我啊，最喜欢米了！！</h1>
							<p>叔叔我啊，最喜欢你们这些不知道d站的人了</p>
							<p><a class="btn btn-lg btn-primary gouba" href="#" role="button">想了解更多么？</a></p>
						</div>
					</div>
				</div>
				<div class="item">
					<img class="second-slide" src="http://www.zlhpro.online:8080/pictures/indexbg1.jpg" alt="Second slide">
					<div class="container">
						<div class="carousel-caption">
							<h1>突发消息，青岛大学惊现蒙古人！！</h1>
							<p>据本网站记者爆料，青岛大学学生在校园内看到蒙古土著，穿戴着蒙古服侍，嘴里念念有词，<br />
								大喊着
								"CHERRY_柠檬什么时候酸啊？？！！"，根据了解，应该是不是很喜欢外国人CHERRY售卖的柠檬，<br />
								目前，
								事情的详情还在调查中。
							</p>
							<p><a class="btn btn-lg btn-primary gouba" href="#" role="button">点我看蒙古上单</a></p>
						</div>
					</div>
				</div>
				<div class="item">
					<img class="third-slide" src="http://www.zlhpro.online:8080/pictures/indexbg1.jpg" alt="Third slide">
					<div class="container">
						<div class="carousel-caption">
							<h1>非洲尼尼？？不行，我要看西伯利亚尼尼！！</h1>
							<p>据传，某冲一流高校校内竟然发现西伯利亚尼尼，黑衣尼尼身穿运动服在学生必经之路上跑步，<br>
								当地温度接近0度，而尼尼竟然有如此强大的耐受能力，真是太不可思议力。</p>
							<p><a class="btn btn-lg btn-primary gouba" href="#" role="button">点我看西伯利亚尼尼</a></p>
						</div>
					</div>
				</div>
			</div>
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>

		<div class="container" style="width: 80%">
			<h2>Title</h2>
			<p>CHERRY</p>
			<div class="itm">
				<button class="mybtn" id="1"><img class="shab" src='http://www.zlhpro.online:8080/pictures/1.jpg' style="padding: 0px; margin: 0px;" /></button>
				<h3>小亮表演绝活儿</h3>
			</div>
			<div class="itm">
				<button class="mybtn" id="2"><img class="shab" src='http://www.zlhpro.online:8080/pictures/2.jpg' style="padding: 0px; margin: 0px;" /></button>
				<h3>刀哥好果汁工厂</h3>
			</div>
			<div class="itm">
				<button class="mybtn" id="3"><img class="shab" src='http://www.zlhpro.online:8080/pictures/3.jpg' style="padding: 0px; margin: 0px;" /></button>
				<h3>沈阳站的团长</h3>
			</div>
			<div class="itm">
				<button class="mybtn" id="4"><img class="shab" src='http://www.zlhpro.online:8080/pictures/4.jpg' style="padding: 0px; margin: 0px;" /></button>
				<h3>你就是萨勒芬妮吧</h3>
			</div>
			<div class="itm">
				<button class="mybtn" id="5"><img class="shab" src='http://www.zlhpro.online:8080/pictures/5.jpg' style="padding: 0px; margin: 0px;" /></button>
				<h3>焯，走，忽略</h3>
			</div>
			<div class="itm">
				<button class="mybtn" id="6"><img class="shab" src='http://www.zlhpro.online:8080/pictures/6.jpg' style="padding: 0px; margin: 0px;" /></button>
				<h3>漩涡族后裔遭雾隐村忍者背刺</h3>
			</div>
			<div class="itm">
				<button class="mybtn" id="7"><img class="shab" src='http://www.zlhpro.online:8080/pictures/7.jpg' style="padding: 0px; margin: 0px;" /></button>
				<h3>社会你虎哥</h3>
			</div>
			<div class="itm">
				<button class="mybtn" id="8"><img class="shab" src='http://www.zlhpro.online:8080/pictures/8.jpg' style="padding: 0px; margin: 0px;" /></button>
				<h3>废物杀马特投敌实录</h3>
			</div>
		</div>

		<footer>
			<div class="l">
				<h2>制作</h2>
				<p>CHERRY_柠檬什么时候酸啊</p>
			</div>
			<div class="r">
				<h2>青岛大学JAVA兴趣社</h2>
				<p>地址：青岛宁夏路308号</p>
				<p>邮箱：crnmsl@163.com</p>
			</div>
		</footer>

		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous">
		</script>
		<script>
			window.jQuery || document.write(
				'<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.20/assets/js/vendor/jquery.min.js"><\/script>'
			)
		</script>
		<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.20/dist/js/bootstrap.min.js"></script>
	</body>
</html>
